<template>
  <el-form :ref="formRef" :model="formData" label-width="80px">
    <el-row v-for="(row1, row1Index) in rowsPropData" :key="row1Index">
      <el-col v-for="(col1, col1Index) in row1.cols" :span="col1.colSpan" :key="row1Index * 100 + col1Index">
        <el-row v-for="(row2, row2Index) in col1.rows" :key="row1Index * 10000 + col1Index * 100 + row2Index">
          <el-col v-for="(col2, col2Index) in row2.cols" :span="col2.span" :key="row1Index * 1000000 + col1Index * 10000 + row2Index * 100 + col2Index">
            <component :is="'rva-form-' + col2.prop.type" v-model="formData[col2.prop.id]" :prop="col2.prop"
                       :formData="formData" :formRef="getFormRef()" :ref="col2.prop.id" :requestParams="requestParams">
            </component>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <rva-form-button v-for="btn in viewData.buttons" :key="btn.id" :viewButtonData="btn"
                       :formData="formData" :formRef="getFormRef()"
                       @rva-button-click="handleButtonClick" :requestParams="requestParams"></rva-form-button>
    </el-row>
  </el-form>
</template>

<script>
import RvaFormTextfield from "@/components/rva/form/textfield";
import RvaFormNumberfield from "@/components/rva/form/numberfield";
import RvaFormTextarea from "@/components/rva/form/textarea";
import RvaFormButton from "@/components/rva/form/button";
import RvaFormSelector from "@/components/rva/form/selector";
import RvaFormRadio from "@/components/rva/form/radio";
import RvaFormSelect from "@/components/rva/form/select";
import RvaFormCheckbox from "@/components/rva/form/checkbox";
import RvaFormCrud from "@/components/rva/form/crud";

import {createRowsPropData, handleRvaButtonClick, getRvaViewData} from "@/api/rva/crud";
import {RvaUtils} from "@/api/rva/util";

import RvaFormConfig from "@/components/rva/form/config";
import RvaButtonConfig from "@/components/rva/button/config";
import Vue from "vue";

Vue.component('rva-form-config', RvaFormConfig)
Vue.component('rva-button-config', RvaButtonConfig)

export default {
  name: "RvaFormView",
  props: ['viewId', 'requestParams'],
  components: {
    "rva-form-button": RvaFormButton,
    "rva-form-textfield": RvaFormTextfield,
    "rva-form-numberfield": RvaFormNumberfield,
    "rva-form-textarea": RvaFormTextarea,
    "rva-form-selector": RvaFormSelector,
    "rva-form-radio": RvaFormRadio,
    "rva-form-select": RvaFormSelect,
    "rva-form-checkbox": RvaFormCheckbox,
    "rva-form-crud": RvaFormCrud,
  },
  data(){
    return {
      rowsPropData: [],
      formRef: 'form-' + new Date().getTime(),
      originalFormData: {},
      formDataOld: {},
      formData: {},
      viewData: {}
    };
  },
  created() {
    var me = this;
    // 设置this.formData/this.viewData
    getRvaViewData(this.viewId, this.requestParams, this,function (data, code) {
      if (code != -1) {
        me.init();
      }
    })
  },
  mounted() {
    console.log ('form mounted...', this.formRef);
    // RvaUtils.trigger(this.formData, undefined, this.viewData, this.$refs);
    // this.formDataOld = RvaUtils.cloneDeep(this.formData);
  },
  methods: {
    init () {
      RvaUtils.clone(this.formData, this.originalFormData, true);
      // console.log ('this.viewData', this.viewData, this.formData);
      this.rowsPropData = createRowsPropData(this.viewData);
      console.log('this.rowsPropData', this.rowsPropData);
      this.$emit('rva-form-width', this.viewData.width);
    },
    resetView (action) {// handleRvaButtonClick中会调用
      RvaUtils.clone(this.originalFormData, this.formData);
      this.resetForm(this.formRef);
    },
    handleButtonClick(data) {
      handleRvaButtonClick(this, data);
    },
    getFormRef () {
      return this.$refs[this.formRef];
    },
  },
  watch: {
    formData: {
      handler(val, valOld) {
        this.$nextTick(() => {
          RvaUtils.trigger(val, this.formDataOld, this.viewData, this.$refs);
          RvaUtils.clone(val, this.formDataOld, true);
        })
      },
      deep: true
    }
  }
};
</script>
